<!-- 修改后的 MainLayout.vue -->
<template>
<Navbar />
  <div class="main-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h1>我的校麦</h1>
      <div class="breadcrumb">我的校麦 > {{ currentRouteName }}</div>
    </div>

    <div class="content-wrapper">
      <!-- 左侧导航 -->
      <nav class="sidebar">
        <div class="nav-group">
          <h3 class="group-title">用户中心</h3>
          <router-link :to="{ path: '/main/profile/user-center/orders' }" class="nav-item"
            :class="{ active: $route.path.includes('/user-center') }">
            订单管理
          </router-link>
        </div>

        <div class="nav-group">
          <h3 class="group-title">账户中心</h3>
          <router-link v-for="item in accountMenus" :key="item.path" :to="`/main/profile/account-center/${item.path}`"
            class="nav-item" :class="{ active: $route.path.includes(`/account-center/${item.path}`) }">
            {{ item.name }}
          </router-link>
        </div>


        <!-- 根据用户角色条件渲染商家中心 -->
        <div class="nav-group" v-if="userRole === 'seller'">
          <h3 class="group-title">商家中心</h3>
          <router-link :to="{ path: '/main/profile/shop-center/manage' }" class="nav-item"
            :class="{ active: $route.path.includes('/shop-center') }">
            商品管理
          </router-link>
          <router-link :to="{ path: '/main/profile/shop-center/add' }" class="nav-item"
            :class="{ active: $route.path.includes('/shop-center') }">
            商品添加
          </router-link>
        </div>
      <!-- </nav> -->

       <!-- 新增消息中心导航链接 -->
        <div class="nav-group">
          <h3 class="group-title">消息中心</h3>
          <router-link :to="{ path: '/main/profile/message-center' }" class="nav-item"
            :class="{ active: $route.path.includes('/message-center') }">
            我的消息
          </router-link>
        </div>
      </nav>
      

      <!-- 主要内容 -->
      <main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </div>

    <!-- 底部链接 -->
    <footer class="footer-links">
      <div class="link-group">
        <a>关于校麦</a>
        <a>协议及隐私权政策</a>
        <a>廉正举报</a>
        <a>联系合作</a>
      </div>
      <div class="link-group">
        <a>招聘信息</a>
        <a>防骗秘籍</a>
        <a>商户入驻</a>
      </div>
      <div class="copyright">© 2025-2025 校麦网</div>
    </footer>
  </div>
  <LoginDialog v-if="showLoginDialog" @close="showLoginDialog = false" />
  <RegisterDialog v-if="showRegisterDialog" @close="showRegisterDialog = false" />
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import LoginDialog from "../../components/LoginDialog.vue";
import RegisterDialog from '../../components/RegisterDialog.vue';
import { ElMessage } from 'element-plus'
import Navbar from "../../components/Navbar.vue";

const showLoginDialog = ref(false);
const showRegisterDialog = ref(false);
const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true');
const userRole = ref(localStorage.getItem('userRole') || 'buyer'); // 获取用户角色，默认为买家

// // 退出登录
// const logout = () => {
//   localStorage.removeItem('isLoggedIn');
//   localStorage.removeItem('currentUser');
//   localStorage.removeItem('userRole'); // 移除用户角色
//   isLoggedIn.value = false;
//   userRole.value = 'buyer'; // 重置用户角色
//   ElMessage.success('退出成功');
// };

const accountMenus = ref([
  { path: 'address', name: '收货地址' },
  { path: 'settings', name: '账号设置' },
  { path: 'profile', name: '个人信息' },
  { path: 'ticket-buyer', name: '常用购票人管理' }
])

const route = useRoute()
const currentRouteName = computed(() => route.name || '')

// 监听登录状态变化
onMounted(() => {
  isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true';
  userRole.value = localStorage.getItem('userRole') || 'buyer';
});
</script>

<style scoped>
/* 确保页面整体铺满 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 主容器样式 */
.main-container {
  min-height: 100vh;
  background: #fff;
  padding-top: 60px;
  /* 为导航栏留出空间 */
}

/* 内容区域样式 */
.content-wrapper {
  display: flex;
  min-height: calc(100vh - 60px);
  /* 减去导航栏高度 */
}

/* 左侧导航栏样式 */
.sidebar {
  width: 240px;
  /* 增加宽度 */
  padding: 20px 0;
  border-right: 1px solid #eee;
  background-color: #f9f9f9;
  /* 背景色 */
  position: fixed;
  /* 固定定位 */
  top: 60px;
  /* 与导航栏对齐 */
  bottom: 0;
  left: 20px;
  /* 向右移动 20px */
  overflow-y: auto;
  /* 允许滚动 */
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
}

/* 顶部标题样式 */
.header {
  padding: 20px 30px;
  border-bottom: 1px solid #eee;
  margin-left: 260px;
  /* 向右移动，与左侧导航栏对齐 */
}

.header h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.breadcrumb {
  color: #999;
  font-size: 12px;
}

/* 主要内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
  /* 减少内边距 */
  margin-left: 260px;
  /* 向右移动，与左侧导航栏对齐 */
  max-width: 1200px;
  /* 限制最大宽度 */
  margin-right: auto;
  /* 居中 */
  margin-top: -20px;
  /* 向上移动 */
}

/* 底部链接样式 */
.footer-links {
  border-top: 1px solid #eee;
  padding: 30px;
  text-align: center;
  margin-left: 260px;
  /* 向右移动，与左侧导航栏对齐 */
}

/* 其他样式保持不变 */
.nav-link:hover {
  color: rgb(130, 69, 25);
  /* background-color: #333; */
  border-radius: 20%;
}

/* .fixed {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #f4f4f4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */

.nav-link {
  margin-right: 20px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.sign-in-button,
.register-button,
.sign-out-button {
  background-color: #e05649;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.nav-group {
  margin-bottom: 30px;
}

.group-title {
  color: #999;
  font-size: 14px;
  /* 增大字体 */
  padding: 0 30px;
  margin-bottom: 16px;
  /* 增加间距 */
  font-weight: 500;
  /* 加粗 */
}

.nav-item {
  display: block;
  padding: 16px 30px;
  /* 增加内边距 */
  color: #333;
  transition: all 0.3s;
  position: relative;
  margin: 8px 0;
  /* 增加上下间距 */
  border-radius: 8px;
  /* 添加圆角 */
}

.nav-item.active {
  color: #230303;
  background: #fff5f7;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #230303;
}

.empty-state {
  text-align: center;
  padding: 100px 0;
}

.empty-image {
  width: 200px;
  margin-bottom: 20px;
}

.empty-text {
  color: #666;
  font-size: 14px;
}

.nav-item:hover {
  background-color: #f0f0f0;
  /* 悬停背景色 */
}

.link-group {
  margin-bottom: 12px;
}

.link-group a {
  color: #999;
  font-size: 12px;
  margin: 0 12px;
  cursor: pointer;
}

.link-group a:hover {
  color: #230303;
}

.copyright {
  color: #ccc;
  font-size: 12px;
  margin-top: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>